<template>
  <div class="app-container">
    <table>
      <thead>
      <tr>
        <th>评估项目</th>
        <th>数量</th>
        <th>单位</th>
        <th>KPI分</th>
        <th>结果</th>
        <th style="width: 100px">实际得分</th>
        <th style="width: 100px">实际结果</th>
        <th>备注</th>
      </tr>
      </thead>
      <tbody>
      <!-- 项目信息收集 -->
      <tr>
        <td rowspan="4">项目信息收集</td>
        <td>&lt;4</td>
        <td>次</td>
        <td>0</td>
        <td>不合格</td>
<!--        <td rowspan="4">-->
<!--          {{ form.collectScore }}-->
<!--        </td>-->
        <td @click="clickProjectHandler" rowspan="4">
          <span v-if="inputProjectShow">{{ inputProjectValue }}</span>
          <el-input v-else v-model.trim="inputProjectValue" type="number" @blur="blurProjectHandler"/>
        </td>
        <td rowspan="4">
          <span v-if="form.collectScore >= 20">优秀</span>
          <span v-else-if="form.collectScore >= 15">良好</span>
          <span v-else-if="form.collectScore >= 8">合格</span>
          <span v-else-if="form.collectScore >= 0">不合格</span>
        </td>
        <td rowspan="4" class="remark">项目资金信息定义：时效内与公司业务相关并且有资质的资金信息，一类、同批计算1次。<br>项目资金收集：必须由不同学校的项目负责人给到才能分别计算积分。<br>当1个客户给到不能覆盖全新类型客户，必须提交客户资产资料佐证，如邮件、微信截图等，才能作为计分依据。<br>有效资金信息：需部长或者总经理确认。<br>注意：一个学校（二级学院）不允许重复出现＞3次，每人每年不低于50个学校（二级学院单独计算）。
        </td>
      </tr>
      <tr>
        <td class="orange-bg">4</td>
        <td class="orange-bg">次</td>
        <td class="orange-bg">8</td>
        <td class="orange-bg">合格</td>
      </tr>
      <tr>
        <td class="blue-bg">6</td>
        <td>次</td>
        <td class="blue-bg">15</td>
        <td>良好</td>
      </tr>
      <tr>
        <td>≥8</td>
        <td>次</td>
        <td>20</td>
        <td>优秀</td>
      </tr>

      <!-- 客户拜访量/邀约到公司 -->
      <tr>
        <td rowspan="4">客户拜访量/邀约到公司</td>
        <td>&lt;12</td>
        <td>次</td>
        <td>0</td>
        <td>不合格</td>
<!--        <td rowspan="4">-->
<!--          {{ form.visitScore }}-->
<!--        </td>-->
        <td @click="clickVisitHandler" rowspan="4">
          <span v-if="inputVisitShow">{{ inputVisitValue }}</span>
          <el-input v-else v-model.trim="inputVisitValue" type="number" @blur="blurVisitHandler"/>
        </td>
        <td rowspan="4">
          <span v-if="form.visitScore >= 25">优秀</span>
          <span v-else-if="form.visitScore >= 20">良好</span>
          <span v-else-if="form.visitScore >= 12">合格</span>
          <span v-else-if="form.visitScore >= 0">不合格</span>
        </td>
        <td rowspan="4" class="remark">电话拜访与实际拜访、邀约来公司。（二级学院单独计算，相同学院、相同项目按1次计算）<br>拜访前有计划、有预约，拜访后有结果，提报信息完整以软件系统拜访记录统计数量为准。<br>一次拜访1分，四舍五入，单日一个客户只计算1次。<br>邀约客户到公司交流1次3分（本地客户）。以拜访记录为准。<br>备注：培训以二级学院整体计1次3分
        </td>
      </tr>
      <tr>
        <td class="orange-bg">12</td>
        <td class="orange-bg">次</td>
        <td class="orange-bg">12</td>
        <td class="orange-bg">合格</td>
      </tr>
      <tr>
        <td class="blue-bg">20</td>
        <td>次</td>
        <td class="blue-bg">20</td>
        <td>良好</td>
      </tr>
      <tr>
        <td>25</td>
        <td>次</td>
        <td>25</td>
        <td>优秀</td>
      </tr>

      <!-- 新增销售跟单 -->
      <tr>
        <td rowspan="4">新增销售跟单</td>
        <td>&lt;4</td>
        <td>个</td>
        <td>0</td>
        <td>不合格</td>
<!--        <td rowspan="4">-->
<!--          {{ form.merchandiserScore }}-->
<!--        </td>-->
        <td @click="clickMerchandiserHandler" rowspan="4">
          <span v-if="inputMerchandiserShow">{{ inputMerchandiserValue }}</span>
          <el-input v-else v-model.trim="inputMerchandiserValue" type="number" @blur="blurMerchandiserHandler"/>
        </td>
        <td rowspan="4">
          <span v-if="form.merchandiserScore >= 20">优秀</span>
          <span v-else-if="form.merchandiserScore >= 15">良好</span>
          <span v-else-if="form.merchandiserScore >= 8">合格</span>
          <span v-else-if="form.merchandiserScore >= 0">不合格</span>
        </td>
        <td rowspan="4" class="remark">以拜访记录的销售跟单数量为考核参考标准。<br>有明确的资金或者建设方向，并撰写或收集项目建设素材。（转发公司相关产品方案即为新增销售跟单）。（同类产品或同包项目算一单）
        </td>
      </tr>
      <tr>
        <td class="orange-bg">4</td>
        <td class="orange-bg">个</td>
        <td class="orange-bg">8</td>
        <td class="orange-bg">合格</td>
      </tr>
      <tr>
        <td>6</td>
        <td>个</td>
        <td>15</td>
        <td>良好</td>
      </tr>
      <tr>
        <td>≥8</td>
        <td>个</td>
        <td>20</td>
        <td>优秀</td>
      </tr>

      <!-- 新增销售机会 -->
      <tr>
        <td rowspan="4">新增销售机会</td>
        <td>1</td>
        <td>个</td>
        <td>3</td>
        <td>不合格</td>
<!--        <td rowspan="4">-->
<!--          {{ form.changeScore }}-->
<!--        </td>-->
        <td @click="clickChangeHandler" rowspan="4">
          <span v-if="inputChangeShow">{{ inputChangeValue }}</span>
          <el-input v-else v-model.trim="inputChangeValue" type="number" @blur="blurChangeHandler"/>
        </td>
        <td rowspan="4">
          <span v-if="form.changeScore >= 27">优秀</span>
          <span v-else-if="form.changeScore >= 18">良好</span>
          <span v-else-if="form.changeScore >= 9">合格</span>
          <span v-else-if="form.changeScore >= 0">不合格</span>
        </td>
        <td rowspan="4" class="remark">以拜访记录录入的销售跟单数量为考核参考标准。</td>
      </tr>
      <tr>
        <td class="orange-bg">2</td>
        <td class="orange-bg">个</td>
        <td class="orange-bg">9</td>
        <td class="orange-bg">合格</td>
      </tr>
      <tr>
        <td>3</td>
        <td>个</td>
        <td>18</td>
        <td>良好</td>
      </tr>
      <tr>
        <td>4</td>
        <td>个</td>
        <td>27</td>
        <td>优秀</td>
      </tr>

      <!-- 日/周报 -->
      <tr>
        <td>日/周报</td>
        <td class="blue-bg">4</td>
        <td>次</td>
        <td class="blue-bg">4</td>
        <td>合格</td>
        <td @click="clickWeekHandler">
          <span v-if="inputWeekShow">{{ inputWeekOther }}</span>
          <el-input v-else v-model.trim="inputWeekOther" type="number" @blur="blurWeekHandler"/>
        </td>
        <td>
          <span v-if="form.weeklyScore === 4">合格</span>
          <span v-else-if="form.weeklyScore >= 0">不合格</span>
        </td>
        <td class="remark">日报：当日总结+清晰准确，第二日计划清晰1次不发扣1分<br>周报：周计划安排工作逻辑清晰即工作内容合理，总结有过程描述及执行结果；周日发：周一前发等周扣2分；一次不发强扣3分。
        </td>
      </tr>

      <!-- 其他项目 -->
      <tr>
        <td>服务大赛、展会等活动</td>
        <td>H</td>
        <td>次</td>
        <td>H*2</td>
        <td></td>
<!--        <td>-->
<!--          {{ form.activityScore }}-->
<!--        </td>-->
        <td @click="clickActivityHandler">
          <span v-if="inputActivityShow">{{ inputActivityValue }}</span>
          <el-input v-else v-model.trim="inputActivityValue" type="number" @blur="blurActivityHandler"/>
        </td>
        <td>
<!--          {{ form.activityScore }}-->
        </td>
        <td class="remark">竞赛、培训（20人以上），展会等活动</td>
      </tr>
      <tr>
        <td>商务标书制作及投标</td>
        <td>X</td>
        <td>个</td>
        <td>X*2</td>
        <td></td>
<!--        <td>-->
<!--          {{ form.tenderScore }}-->
<!--        </td>-->
        <td @click="clickTenderHandler">
          <span v-if="inputTenderShow">{{ inputTenderValue }}</span>
          <el-input v-else v-model.trim="inputTenderValue" type="number" @blur="blurTenderHandler"/>
        </td>
        <td>
<!--          {{ form.tenderScore }}-->
        </td>
        <td class="remark">投标活动参与标书制作及投标 2分（同一个设备算一个项目）</td>
      </tr>
      <tr>
        <td>协助代理商处理商务事宜</td>
        <td>Z</td>
        <td>个</td>
        <td>Z*2</td>
        <td></td>
<!--        <td>-->
<!--          {{ form.businessScore }}-->
<!--        </td>-->
        <td @click="clickBusinessHandler">
          <span v-if="inputBusinessShow">{{ inputBusinessValue }}</span>
          <el-input v-else v-model.trim="inputBusinessValue" type="number" @blur="blurBusinessHandler"/>
        </td>
        <td>
<!--          {{ form.businessScore }}-->
        </td>
        <td class="remark">包括全流程协助投标，商务资料的对接及投标参与。帮助代理运维的当地业务发展、做技术支持、技术资料提供，陪同面对客户时，配合商务公关、市场拓展、价格维护、地域保护。
        </td>
      </tr>
      <tr>
        <td>媒体宣传</td>
        <td>M</td>
        <td>次</td>
        <td>M*1</td>
        <td></td>
        <td @click="clickHandler">
          <span v-if="inputShow">{{ form.mediaScore }}</span>
          <el-input v-else v-model.trim="form.mediaScore" type="number" @blur="blurHandler"/>
        </td>
        <td></td>
        <td class="remark">扣分项，包括群维护，朋友圈，抖音。视频号，缺少宣传册等等。最高3分，根据未完成情况扣3-5分，被公司点名直接扣5分
        </td>
      </tr>
      <tr>
        <td>纪律</td>
        <td>J</td>
        <td>次</td>
        <td>J*2</td>
        <td></td>
        <td @click="clickOtherHandler">
          <span v-if="inputShowOther">{{ form.disciplineScore }}</span>
          <el-input v-else v-model.trim="form.disciplineScore" type="number" @blur="blurOtherHandler"/>
        </td>
        <td></td>
        <td class="remark">扣分项，包括迟到，早退，无故缺席，规定时间未完成，等违纪行为，根据情况扣1-5分。被公司点名直接扣5分
        </td>
      </tr>
      <!-- 新增销售机会 -->

      <!-- KPI总分 -->
      <tr>
        <td colspan="5" rowspan="3">KPI总分</td>
        <td colspan="1" rowspan="3">
          {{ form.totalScore }}
        </td>
        <td colspan="1">优秀</td>
        <td class="text-left">＞95【每个考核项目必须完成合格以上】</td>
      </tr>
      <tr>
        <td colspan="1">良好</td>
        <td class="text-left">75-95【每个考核项目必须完成合格以上】</td>
      </tr>
      <tr>
        <td colspan="1">合格</td>
        <td class="text-left">45-74</td>
      </tr>

      <tr>
        <td colspan="5" rowspan="3">备注</td>
        <td class="text-left" colspan="5" @click="remarkChange">
          <span v-if="inputRemarkShow">{{ remarkValue }}</span>
          <el-input v-else v-model.trim="remarkValue" @blur="blurRemarkHandler" />
        </td>
      </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
import {getDataApi, updateDataApi} from '@/api/crm/sa/examine/info'
import {getDataListApi} from '@/api/crm/sa/examine'
import store from "@/store";

export default {
  name: "ExamineEditInfo",
  data() {
    return {
      inputRemarkShow: true, // 备注
      inputWeekShow: true,
      inputValueWeek: false,
      inputProjectShow: true, // 项目收集
      inputVisitShow: true, // 邀约到公司
      inputMerchandiserShow: true, // 销售跟单
      // 显示的输入框
      inputShow: true,
      inputShowOther: true,
      inputChangeShow: true, // 销售机会
      inputActivityShow: true, // 活动
      inputTenderShow: true, // 标书
      inputBusinessShow: true, // 代理商
      inputBusinessValue: 0, // 代理商
      inputTenderValue: 0, // 标书
      inputActivityValue: 0, // 活动
      inputChangeValue: 0, // 销售机会
      // 输入框的值
      remarkValue: "",
      inputValue: 0,
      inputValueOther: 0,
      inputWeekOther: 0,
      inputProjectValue: 0, // 项目收集
      inputVisitValue: 0, // 客户邀约到公司
      inputMerchandiserValue: 0, // 销售跟单
      // 纪律分
      discipline: 0,
      // 宣传分
      publicize: 0,
      // 考核数据
      form: {
        collectScore: 0,
        visitScore: 0,
        merchandiserScore: 0,
        changeScore: 0,
        weeklyScore: 0,
        disciplineScore: 0,
        activityScore: 0,
        tenderScore: 0,
        businessScore: 0,
        totalScore: 0,
        mediaScore: 0,
      },
    }
  },
  props: ['info'],
  watch: {
    info: {
      immediate: true,
      deep: true,
      handler(newV) {
        this.form = { ...newV }
        this.inputWeekOther = newV.weeklyScore
        this.inputProjectValue = newV.collectScore
        this.inputVisitValue = newV.visitScore
        this.inputMerchandiserValue = newV.merchandiserScore
        this.inputChangeValue = newV.changeScore
        this.inputActivityValue = newV.activityScore
        this.inputTenderValue = newV.tenderScore
        this.inputBusinessValue = newV.businessScore
        this.remarkValue = newV.remark
        // this.getData()
      },
    },
  },
  created() {
    this.form = {...this.info}
    this.inputWeekOther = this.info.weeklyScore
    console.log(this.info.weeklyScore)
    // this.getData()
    // console.log(this.form)
  },
  methods: {
    // 修改备注
    remarkChange() {
      this.inputRemarkShow = false
    },
    // 标书
    blurRemarkHandler() {
      this.inputRemarkShow = true
      this.updateScore()
    },
    // 获取数据
    // async getData() {
    //   const res = await getDataListApi({
    //     id: this.form.id
    //   })
    //   console.log(res)
    // },
    // 点击单元格 1 是纪律分， 2 是宣传分
    clickHandler() {
      this.inputShow = false
      this.inputValue = ''
    },
    // 点击单元格 1 是纪律分， 2 是宣传分
    clickWeekHandler() {
      this.inputWeekShow = false
      this.inputValueWeek = ''
    },
    // 点击单元格 1 是纪律分， 2 是宣传分
    clickOtherHandler() {
      this.inputShowOther = false
      this.inputValueOther = ''
    },
    // 项目收集点击的回调
    clickProjectHandler(){
      this.inputProjectShow = false
      // this.inputProjectValue = ''
    },
    // 客户邀约到公司
    clickVisitHandler() {
      this.inputVisitShow = false
    },
    // 销售跟单
    clickMerchandiserHandler() {
      this.inputMerchandiserShow = false
    },
    // 销售机会
    clickChangeHandler() {
      this.inputChangeShow = false
    },
    // 活动
    clickActivityHandler() {
      this.inputActivityShow = false
    },
    // 标书
    clickTenderHandler() {
      this.inputTenderShow = false
    },
    // 代理商
    clickBusinessHandler() {
      this.inputBusinessShow = false
    },
    // 代理商
    blurBusinessHandler() {
      this.inputBusinessShow = true
      this.updateScore()
    },
    // 标书
    blurTenderHandler() {
      this.inputTenderShow = true
      this.updateScore()
    },
    // 活动
    blurActivityHandler() {
      this.inputActivityShow = true
      this.updateScore()
    },
    // 销售机会
    blurChangeHandler(){
      this.inputChangeShow = true
      this.updateScore()
    },
    // 销售跟单
    blurMerchandiserHandler() {
      this.inputMerchandiserShow = true
      this.updateScore()
    },
    // 客户邀约到公司
    blurVisitHandler() {
      this.inputVisitShow = true
      this.updateScore()
    },
    // 项目收集失去焦点
    blurProjectHandler(){
      this.inputProjectShow = true
      this.updateScore()
    },
    // 输入框失去焦点的回调
    blurHandler() {
      this.inputShow = true
      this.updateScore()
    },
    // 输入框失去焦点的回调
    blurOtherHandler() {
      this.inputShowOther = true
      this.updateScore()
    },
    // 周报失去焦点的回调
    blurWeekHandler() {
      this.inputWeekShow = true
      this.updateScore()
    },
    // 更新分数
    async updateScore() {
      const res = await updateDataApi({
        ...this.form,
        remark: this.remarkValue || "",
        businessScore: this.inputBusinessValue || 0,
        tenderScore: this.inputTenderValue || 0,
        activityScore: this.inputActivityValue || 0,
        changeScore: this.inputChangeValue || 0,
        collectScore: this.inputProjectValue || 0,
        visitScore: this.inputVisitValue || 0,
        merchandiserScore: this.inputMerchandiserValue || 0,
        weeklyScore: this.inputWeekOther || 0,
        mediaScore: this.form.mediaScore || 0,
        disciplineScore: this.form.disciplineScore || 0,
        updateBy: store.state.user.nickName,
      })
      if (res.code === 200) {
        this.$message({
          message: res.msg,
          type: 'success'
        });
        // 更新分数
        this.$emit('get-date')
        this.countScoreHandler()
      } else {
        this.$message({
          message: res.msg,
          type: 'error'
        });
      }
    },
    // 计算分数的回调
    countScoreHandler() {
      const {
        collectScore,
        visitScore,
        merchandiserScore,
        changeScore,
        weeklyScore,
        disciplineScore,
        activityScore,
        tenderScore,
        businessScore,
        mediaScore
      } = this.form

      this.form.totalScore = (+collectScore) + (+visitScore)
        + (+merchandiserScore) + (+changeScore) + (+weeklyScore) + (+disciplineScore)
        + (+activityScore) + (+tenderScore) + (+businessScore) + (+mediaScore)
    },
  },
}
</script>
<style scoped lang="scss">
table {
  border-collapse: collapse;
  width: 100%;
  text-align: center;
}

table td, table th {
  border: 1px solid #000;
  padding: 6px;
}

.orange-bg {
  background-color: #f90;
}

.blue-bg {
  background-color: #09f;
  color: white;
}

.remark {
  text-align: left;
  font-size: 0.9em;
  max-width: 400px;
}

.text-left {
  text-align: left;
}
</style>
